import * as THREE from "three"
import initRenderer from "./core/renderer";
import initScene from "./core/scene";
import { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js";

import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js';
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2.js';
import { Line2 } from 'three/examples/jsm/lines/Line2.js';


class Box {
    private scene;
    private camera;
    private renderer;
    private container;
    private pointNum = 100;
    private num = 10;//从曲线上获取点数量
    private index = 20;//取点索引位置
    private geometry_short;
    private points;

    constructor(container) {
        this.container = container;
        this.scene = new THREE.Scene();
        this.init();
    }
    init() {
        // 初始化渲染器和相机
        let { renderer, camera, render } = initRenderer({ scene: this.scene, container: this.container });
        this.renderer = renderer;
        this.camera = camera;
        this.renderer.setClearColor("black");

        // 初始化场景
        initScene({ scene: this.scene, container: this.container, renderer: this.renderer, camera: this.camera });

        //初始化模型
        this.initObjects();

        // 开始渲染
        render();
    }

    initObjects() {
        this.createLine();
    }

    //绘制
    createLine() {/**
    * 创建线条模型
    */
        var geometry = new THREE.BufferGeometry(); //创建一个缓冲类型几何体
        // 三维样条曲线
        var curve = new THREE.CatmullRomCurve3([
            new THREE.Vector3(100, 0, -100),
            new THREE.Vector3(0, 80, 0),
            new THREE.Vector3(-100, 0, 100),
        ]);
        //曲线上等间距返回多个顶点坐标
        this.points = curve.getSpacedPoints(100); //分段数100，返回101个顶点
        // setFromPoints方法从points中提取数据赋值给attributes.position
        geometry.setFromPoints(this.points);
        var material = new THREE.LineBasicMaterial({
            color: 0x006666, //轨迹颜色
        });
        //线条模型对象
        var line = new THREE.Line(geometry, material);
        this.scene.add(line);

        const points_short = this.points.slice(this.index, this.index + this.num); //从曲线上获取一段
        // var geometry2 = new THREE.BufferGeometry();
        // geometry2.setFromPoints(points2);
        this.geometry_short = new LineGeometry();
        var pointArr = []
        //把圆弧曲线返回的顶点坐标Vector3中xyz坐标提取到pointArr数组中
        points_short.forEach(function (v3) {
            pointArr.push(v3.x, v3.y, v3.z)
        })
        // 设置几何体顶点位置坐标
        this.geometry_short.setPositions(pointArr);

        // 批量计算所有顶点颜色数据
        var posNum = points_short.length - 2; //分界点黄色，两端和轨迹线一个颜色青色
        var colorArr = [];
        for (var i = 0; i < points_short.length; i++) {
            var color1 = new THREE.Color(0x006666); //轨迹线颜色 青色
            var color2 = new THREE.Color(0xffff00); //黄色
            var color = null;
            // 飞线段里面颜色设置为黄色，两侧设置为青色，也就是说中间某个位置向两侧颜色渐变
            if (i < posNum) {
                color = color1.lerp(color2, i / posNum)
            } else {
                color = color2.lerp(color1, (i - posNum) / (points_short.length - posNum))
            }
            colorArr.push(color.r, color.g, color.b);
        }

        this.geometry_short.setColors(colorArr);


        var material2 = new LineMaterial({
            // color: 0xffff00, //设置线条颜色值
            linewidth: 3, // 设置线宽            
            vertexColors: true, // 注释color设置，启用顶点颜色渲染
        });
        //材质输入Three.js渲染canvas画布的宽高度
        material2.resolution.set(window.innerWidth, window.innerHeight);
        //Line2模型对象
        var line2 = new Line2(this.geometry_short, material2);
        this.scene.add(line2);

        this.animate();
    }

    animate() {
        var indexMax = this.pointNum - this.num; //飞线取点索引范围
        if (this.index > indexMax) {
            this.index = 0;
        }
        this.index += 0.5;
        const points2 = this.points.slice(this.index, this.index + this.num); //从曲线上获取一段
        // geometry2.setFromPoints(points2);
        var pointArr = []
        //把圆弧曲线返回的顶点坐标Vector3中xyz坐标提取到pointArr数组中
        points2.forEach(function (v3) {
            pointArr.push(v3.x, v3.y, v3.z)
        })
        // 设置几何体顶点位置坐标
        this.geometry_short.setPositions(pointArr);


        requestAnimationFrame(this.animate.bind(this));
    }
}

export default Box;